'use strict';
import React,{Component} from 'react';
import Util from '../../common/util';
import * as URLconstant from '../../constant/URLconstant'
import Header from '../../common/header';
import PinIndex from './index';
import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
export default class list extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            pinList:null
        };
      }

    componentDidMount() {
        this.getList()
    }

      getList(){
          let url = URLconstant.GET_ALL_PIN_LIST
          let datakey=[]
          datakey['user_id']=1
          Util.get(url,datakey,this.getListSuc.bind(this),this.errorCallback.bind(this))
      }
    getListSuc(datas){
        let pinList
        if(datas.status==0){
            pinList=datas.data
        }else{
            pinList=[]
        }
        this.setState({
            pinList:pinList
        })
    }

    errorCallback(err){

    }

    toIndex(id,goods_id){
          this.props.navigator.push({
              component:PinIndex,
              passProps:{
                  pin_id:id,
                  goods_id:goods_id
              }
          })
    }

    showPinList(){
          let pinList =this.state.pinList
        return(
            <View>
                {
                    pinList.map((item,index)=>{
                        return(
                            <TouchableOpacity onPress={()=>this.toIndex(item.id,item.goods_id)} key={index} style={styles.pin_item}>
                                <View style={styles.pin_item_left}>
                                    <Image
                                        source={{uri:item.picture}}
                                        resizeMode={'cover'}
                                        style={styles.pin_item_left}
                                    />
                                </View>
                                <View style={styles.pin_item_right}>
                                    <Text style={{fontSize:14,color:"#000"}}>{item.goods_name}</Text>
                                    <View style={{flexDirection:'row',alignItems:'center'}}>
                                        <Text style={{fontSize:16,color:"#f00"}}>¥{item.act_price}</Text>
                                        <View style={{flexDirection:'row',alignItems:'center',marginLeft:10}}>
                                            <Text style={{fontSize:12,color:"#969696"}}>原价:</Text>
                                            <Text style={{fontSize:12,color:"#969696",textDecorationLine:'line-through'}}>¥{item.price}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.pin_item_bottom}>
                                       <View style={{flexDirection:'row',alignItems:'center'}}>
                                           {
                                               item.group_user?
                                                   <View style={{flexDirection:'row',alignItems:'center'}}>
                                                       {
                                                           item.group_user.map((user,index)=>{
                                                               if(index<3){
                                                                   return(
                                                                       <Image
                                                                           key={index}
                                                                           resizeMode={'cover'}
                                                                           style={{width:26,height:26,borderRadius:13,marginRight:5}}
                                                                           source={{uri:user.headimage}}
                                                                       />
                                                                   )
                                                               }
                                                           })
                                                       }
                                                   </View>
                                                   :null
                                           }
                                           <Text style={{fontSize:12,color:"#696969"}}>{item.pin_coming}人正在拼</Text>
                                       </View>
                                        <View style={styles.to_join_btn}>
                                            <Text style={{fontSize:12,color:"#fff"}}>去拼单</Text>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }

      render(){
          let pinList = this.state.pinList
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '拼团列表',id:2}}/>
                  {
                      pinList==null?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                          <View style={{flex:1}}>
                              {
                                  pinList.length==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>没有拼团</Text>
                                      </View>
                                      :
                                      <ScrollView style={{flex:1}}>
                                          {this.showPinList()}
                                      </ScrollView>
                              }
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    pin_item:{
        backgroundColor:"#fff",
        padding:10,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        marginBottom:10
    },
    pin_item_left:{
        width:100,
        height:100,
    },
    pin_item_right:{
        flex:1,
        paddingLeft:10,
        height:100,
        justifyContent:'space-between'
    },
    pin_item_bottom:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between'
    },
    to_join_btn:{
        borderRadius:5,
        height:26,
        alignItems:'center',
        justifyContent:'center',
        paddingHorizontal:10,
        backgroundColor:"#f00",
    }
})